<template>
    <!-- 账单日调整(新) -->
    <div class="billdayAdjustment" v-loading="isLoading">
        <cardComponent pageTitle="账单日调整(新)">
            <template slot="cardBody">
                <div class="dialogVisible">
                    <el-form :model="searchForm" size="small" label-width="45%">
                        <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                            <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="卡号：" label-position="left" prop="CARDNO">
                            <el-input v-model="searchForm.CARDNBR" disabled></el-input>
                        </el-form-item>
                        <el-form-item
                            label="上次账单日修改日期："
                            label-position="left"
                            prop="CARDNO"
                        >-未修改过/修改后未生效</el-form-item>
                        <el-form-item
                            label="原账单日期："
                            label-position="left"
                            prop="CARDNO"
                        >{{searchForm.CYNBR + '日'}}</el-form-item>
                        <el-form :model="billForm" :rules="rules" label-width="45%">
                            <el-form-item label="日账单日期：" label-position="left" prop="STMTDAY">
                                <el-select placeholder="请选择" clearable v-model="billForm.STMTDAY">
                                    <el-option
                                        v-for="item in formSelect"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <el-form-item
                            label="有效账单日期："
                            label-position="left"
                            prop="CARDNO"
                            class="dateBill"
                        >
                            <span>5日</span>
                            <span>15日</span>
                            <span>25日</span>
                        </el-form-item>
                        <div class="btnBox">
                            <el-button
                                type="primary"
                                size="small"
                                @click="hanleSure"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </div>
                    </el-form>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'billdayAdjustment',
    components: {
        cardComponent,
    },
    data() {
        return {
            searchForm: { // 搜索表单字段
                CARDNBR: '', // 卡号
                // 账单日
                CYNBR: '',
            },
            billForm: {
                // 日账单调整日期
                STMTDAY: '',
            },
            // 表单下拉
            formSelect: [
                {
                    label: '5日',
                    value: '05',
                },
                {
                    label: '15日',
                    value: '15',
                },
                {
                    label: '25日',
                    value: '25',
                },

            ],
            rules: {
                STMTDAY: [
                    { required: true, message: '请选择账单日期', trigger: 'blur' },
                ],
            },
            isLoading: false,
            accountType: '',
        };
    },
    filters: {

    },
    async mounted() {
        // 日账单调整获取信息
        this.getCardInfo();
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击确定按钮进行修改
        hanleSure() {
            this.hanleTableData();
        },
        // 进入页面获取卡信息
        getCardInfo() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                PIN: '12345678', // 密码
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3014';
            defaultParams.body.appBody = appBody;
            // 3014交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 2222);
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm = result.body.appBody || [];
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        hanleTableData() {
            if (this.billForm.STMTDAY != '') {
                if (this.billForm.STMTDAY != this.searchForm.CYNBR) {
                    const appBody = {
                        CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                        PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                        STMTDAY: this.billForm.STMTDAY, // 调整后的账单日期
                        PIN: '123456', // 密码
                    };
                    const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
                    defaultParams.body.appHead.tranCode = '4002';
                    defaultParams.body.appBody = appBody;
                    // 4002交易
                    this.$confirm('确定修改?', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                        this.isLoading = true;
                        this.$post.common.transPort(defaultParams).then((res) => {
                            this.isLoading = false;
                            if (res.status === 200) {
                                const result = JSON.parse(res.data.jsonRes);
                                console.log(result, 111111);
                                if (result.sysHead.rspCd === '000000') {
                                    this.$alert('修改成功', '提示', {
                                        customClass: 'success', type: 'success',
                                    });
                                    this.getCardInfo();
                                } else {
                                    const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                                    this.$alert(errorMsg, '提示', {
                                        customClass: 'error', type: 'error',
                                    });
                                }
                            } else {
                                this.$alert('请求失败', '提示', {
                                    customClass: 'error', type: 'error',
                                });
                            }
                        });
                    }).catch({

                    });
                } else {
                    this.$alert('新调整账单日期不能与原账单日期相同！', '提示', {
                        customClass: 'warning', type: 'warning',
                    });
                }
            } else {
                this.$alert('请输入账单日期', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            }
        },


    },
};
</script>

<style lang='scss'>
.billdayAdjustment {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .btnBox {
        text-align: center;
    }
    .el-form-item__content {
        text-align: left;
    }
    .dateBill span {
        margin-left: 20px;
    }
}
</style>
